<template lang="pug">
div
  nav-div
  .flex.jsb.ae
    .ui.header  渠道优惠卷列表

  table.ui.table
    thead
      tr
        th 名称
        th 渠道
        th 金额
        th 数量
        th 开始时间
        th 结束时间
        th 操作
       
    tbody
        tr(v-for="coupon in coupons ")
          td {{coupon.name}}
          td {{coupon.channel}}
          td {{coupon.price}}元
          td {{coupon.number}}
          td {{moment(coupon.valid_before).format('YYYY-MM-DD HH:mm:ss') }}
          td {{moment(coupon.valid_after).format('YYYY-MM-DD HH:mm:ss') }} 
          td
            .ui.button(@click="deleteCoupon(coupon)") 删除
</template>

<script>
import { getchannelCoupons,deletechannelCoupons} from '../../vuex/action'
import NavDiv from '../../modules/nav'
import DatePicker from '../../modules/date'


export default {
  name: 'channel',
  components: {
    NavDiv,
    DatePicker,
  },
  vuex: {
    getters: {
      couponsSource: ({ coupon }) => coupon.coupons,
    },
    actions: {
      getchannelCoupons,
      deletechannelCoupons
    }
  },
  data () {
    return {
      coupons: [],
      coupon: {},
    }
  },
  ready () {
    this.load()
  },
  methods: {
    load(){
      catchError(async () => {
        await this.getchannelCoupons()
      })
    },
   deleteCoupon(coupon) {
      catchError(async () => {
        await this.deletechannelCoupons({
          name: coupon.name,
          price: coupon.price
        })
        this.load()
      }, '删除成功')
    },
  },
  watch: {
    couponsSource: {
      handler (val, old) {
        this.coupons = _.cloneDeep(val)
      },
      deep: true,
      immediate: false,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
